<template>
  <div class="wrapper" ref="wrapper">
    <div class="ele-sell-evaluate">
      <div class="evalute-score">
        <div class="score">
          <div class="score-text">{{ seller.score | Fixed }}</div>
          <div class="score-static-info">综合评分</div>
          <div class="score-ranking">高于周边商家50%</div>
        </div>
        <div class="star">
          <div v-for="index in 3" class="stars">
            <span>服务态度</span> <ele-star :score="seller.score"></ele-star>
          </div>
        </div>
      </div>
      <!-- 过滤组件 -->
      <div class="evalute-filter-container">
        <ele-filter
          :isCheck="isCheck"
          :btnIndex="btnIndex"
          :btnList="btnList"
          @handlerBtnClick="handlerBtnClick"
          @radioCheck="radioCheck"
        ></ele-filter>
      </div>
      <!-- 评论组件 -->
      <div class="commend">
        <ele-evaluate-group :dataList="filterList" />
      </div>
    </div>
  </div>
</template>

<script>
// 工具 初始化el高度
import { commonUtils } from "@/common/js/utils";
// 网络请求
import { rating, seller } from "@/config/api";
// ♥组件
import eleStar from "@/components/stars.vue";
// 过滤组件
import eleFilter from "../evaluate_filter";
// 评论组件
import eleEvaluateGroup from "../evaluate_group";
// betterScroll
import { _InitScroll } from "@/common/js/better-scroll";
export default {
  mixins: [commonUtils],
  data() {
    return {
      evaData: [], // 评论信息
      seller: {}, // 商户信息
      btnList: [
        { text: "全部", key: -1 },
        { text: "满意", key: 0 },
        { text: "不满意", key: 1 },
      ], // 评论过滤按钮text 文本
      btnIndex: -1, // 点击 按钮key
      isCheck: false, //  过滤 掉没有评论的信息
      BsApp: {}, // betterScroll 实例
    };
  },

  methods: {
    //  点击的过滤按钮
    handlerBtnClick(index) {
      this.btnIndex = index;
    },
    // 点击 是否过滤 无 文本的评论
    radioCheck(v) {
      // 修改状态
      this.isCheck = v;
    },
  },
  computed: {
    filterList() {
      let _list = this.__FilterDate(this.evaData, this.btnIndex, this.isCheck);
      return _list;
    },
  }, 
  filters: {
    //  评分 保留
    Fixed(value) {
      if (!value) return;
      return value.toFixed(1);
    },
  },
  created() {
    // http 商户
    seller().then((res) => {
      this.seller = res.data;
    });
    // http 评价
    rating().then((res) => {
      this.evaData = res.data;
    });
    // betterScroll 加载
    this.$nextTick(() => {
      let { wrapper } = this.$refs;
      this.__InitWrapper(wrapper);
      this.BsApp = new _InitScroll(wrapper);
    });
  },
  watch:{
    filterList:{
      handler(){
        
      },
      deep:true
    }
  },
  components: {
    // 星组件
    eleStar,
    // filter组件
    eleFilter,
    // 评论组件
    eleEvaluateGroup,
  },
};
</script>

<style scoped>
.wrapper {
  overflow: hidden;
}
.ele-sell-evaluate{
  padding-bottom: 48px;
}
.evalute-score {
  display: flex;
  padding: 18px 0;
  flex-wrap: nowrap;
  position: relative;
}
.evalute-score::after {
  content: "";
  position: absolute;
  bottom: -16px;
  height: 16px;
  width: 100%;
  border-top: 1px solid rgba(53, 54, 54, 0.2);
  border-bottom: 1px solid rgba(53, 54, 54, 0.2);
  background-color: rgba(54, 55, 56, 0.1);
}
.score {
  flex: 0 0 137.5px;
  text-align: center;
  border-right: 1px solid rgba(7, 17, 27, 0.2);
}
.star {
  padding: 0 24px;
}
.star > div > span {
  color: rgba(7, 17, 27, 0.7);
  font-size: 12px;
  line-height: 18px;
  vertical-align: top;
}
.star.ele-stars-item {
  margin-right: 12px;
}
.star.ele-stars-item:last-child {
  margin: 0;
}
.evalute-filter-container {
  padding: 18px 18px;
}
.score-text {
  color: #e57373;
  font-size: 24px;
  line-height: 28px;
}
.score-static-info {
  font-size: 12px;
  line-height: 12px;
  color: rgb(7, 17, 27);
}
.score-ranking {
  margin-top: 8px;
  margin-bottom: 6px;
  line-height: 10px;
  font-size: 10px;
  color: rgb(7, 17, 27);
}
</style>
